<template>
  <div style="width: 100%; height: 100%; display: flex;">
    <div style="flex: 1; padding: 30px">
      <el-card shadow="never">
        <img :src="avatar" style="width: 100%" />
        <template #header>{{ name }}</template>

      </el-card>
    </div>
    <div style="flex: 2; padding: 30px; text-align: center; ">
      <!-- <el-calendar v-model="date" style="border: 1px rgb(228, 231, 237) solid; border-radius: 5px;"/> -->
      <h2>用户基本信息</h2>
      <el-descriptions :column="1" :size="size" border>
        <el-descriptions-item label="用户名">{{ name }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ email }}</el-descriptions-item>
        <el-descriptions-item label="余额">{{ money ? money : 0 }}</el-descriptions-item>
        <el-descriptions-item label="生日">
          <el-tag size="small">{{ birthday }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from "axios";
import COS from "cos-js-sdk-v5";
import { inject, ref, onBeforeMount } from "vue";
const date = ref(new Date());
const name = ref('')
const email = ref('')
const birthday = ref('')
const money = ref(0)
const avatar = ref('')
const cos: COS = inject('$cos')
const cosConfig :any = inject('$cosConfig')

onBeforeMount(() => {
  axios.get(`/api/userT/getById/${localStorage.getItem('id')}`).then((res) => {
    name.value = res.data.data.name
    email.value = res.data.data.email
    birthday.value = res.data.data.birthday
    money.value = res.data.data.money
    avatar.value = res.data.data.avatar
    console.log(res);
  })
  cos.getObject({
    Bucket: cosConfig.Bucket, /* 填写自己的 bucket，必须字段 */
    Region: cosConfig.Region,     /* 存储桶所在地域，必须字段 */
    Key: `webexp/${localStorage.getItem('id')}`,              /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
    DataType: 'blob'
  }, function (err, data) {
    if (err) return console.log(err);
    var Url = URL.createObjectURL(data.Body as Blob);
    console.log(Url)
    avatar.value = Url
  });

})
</script>

<style scope></style>